<template>
  <div class="homeView">
    <header>
      <!-- 头部 -->
      <TopNavView :onShow="onShow"></TopNavView>
      <!-- 导航栏 -->
      <HeaderView></HeaderView>
      <div class="bannerView">
        <!-- 轮播图 -->
        <carousel-views :bannerList="bannerList"></carousel-views>
        <!-- 轮播图左侧分类 -->
        <category-view :cateList = "cateList"></category-view>
      </div>

      <!-- 新鲜好物 -->
      <items-view :newsList="newsList">
        <template v-slot:title>
          <div class="slotname">
            <h3>新鲜好物</h3>
            <span>新鲜出炉 品质靠谱</span>
          </div>
        </template>
      </items-view>

      <!-- 人气推荐 -->
      <items-view :newsList="hotsList">
        <template v-slot:title>
          <div class="slotname">
            <h3>人气推荐</h3>
            <span>人气爆款 不容错过</span>
          </div>
        </template>
      </items-view>

      <!-- 热门品牌 -->
      <brand-view :brandList="brandList"></brand-view>

      <product-view></product-view>

      <special-view></special-view>

      <!-- 底部 -->
      <footer-view></footer-view>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
import TopNavView from "@/components/TopNavView.vue";
import HeaderView from "@/components/HeaderView.vue";
import CarouselViews from "@/components/CarouselViews.vue";
import ItemsView from "./components/ItemsView.vue";
import BrandView from "./components/BrandView.vue";
import FooterView from "@/components/FooterView.vue";
import CategoryView from "./components/CategoryView.vue";
import SpecialView from './components/SpecialView.vue';
import ProductView from './components/productView.vue';

export default {
  components: {
    TopNavView,
    HeaderView,
    CarouselViews,
    ItemsView,
    BrandView,
    FooterView,
    CategoryView,
    SpecialView,
    ProductView,
  },
  data() {
    return {
      onShow: false,
      bannerList: [],
      cateList:[],
      newsList: [],
      hotsList: [],
      brandList: [],
    };
  },
  methods: {


    // 轮播图左侧分类
    async getList() {
      let res = await this.$http.category();
      console.log(res.data.result);
      let list = res.data.result.map((item) => {
        return {
          id: item.id,
          name: item.name,
          goods: item.goods,
          children: item.children.slice(0, 2),
        };
      });
      this.cateList = list;
      console.log(this.cateList)
    },

    // banner数据
    async getBanner() {
      const res = await this.$http.banner();
      this.bannerList = res.data.result;
    },

    // 新鲜好物数据
    async getNews() {
      const res = await this.$http.news();
      this.newsList = res.data.result;
      // console.log(this.newsList);
    },

    // 人气推荐数据
    async getHots() {
      const res = await this.$http.hots();
      this.hotsList = res.data.result;
      // console.log(this.hotsList);
    },

    // 热门品牌数据
    async getBrand() {
      const res = await this.$http.brand();
      this.brandList = res.data.result;
      // console.log(res);
    },
  },
 
  created() {
    this.getBanner();
    this.getList();
    this.getNews();
    this.getHots();
    this.getBrand();
  },
};
</script>

<style lang="scss" scoped>
header {
  height: 53px;
  background: #333;
  .bannerView {
    position: relative;
  }
  .slotname {
    display: flex;
    align-items: center;
  }
}
</style>